<template>
  <div class="egg"></div>
  <div id="timer">
    <span class="minutes">00</span>: <span class="seconds">00</span>:
    <span class="milliseconds">00</span>
  </div>
  <div>
    <div id="timer2"></div>
    <button @click="pauseTimerWorker">暂停</button>
    <button @click="continueTimerWorker" style="margin-left: 10px">继续</button>
  </div>
  <input type="text" class="testinput" v-model="testinput" />
  {{ testinput }}
</template>

<script lang="ts" setup>
import { CountdownTimer } from "@/utils/countDownTimer";
import { onMounted, onUnmounted } from "vue";
import { debounceRef } from "../../utils/debounceRef";
import { GameRequestQueue } from "@/utils/gameRequestQueue";
let countdownWorker: any = null;
const testinput = debounceRef("");
let remainingTime: number | null = null;
let animationFrameId: number | null = null;
let timeDom: HTMLElement | null;

onMounted(() => {
  // startTimer1();
  startTimerWorker();
  // startGame();
});

const startGame = () => {
  // 使用示例
  const queue = new GameRequestQueue();
  const gameState = { isRaceEnded: false }; // 定义游戏状态

  const queueList = [
    {
      type: "MOVE",
      data: { direction: "left", distance: 10 },
    },
    {
      type: "MOVE",
      data: { direction: "top", distance: 8 },
    },
    {
      type: "MOVE",
      data: { direction: "left", distance: 15 },
    },
    {
      type: "MOVE",
      data: { direction: "left", distance: 11 },
    },
    {
      type: "MOVE",
      data: { direction: "top", distance: 12 },
    },
    {
      type: "MOVE",
      data: { direction: "left", distance: 11 },
    },
    {
      type: "MOVE",
      data: { direction: "top", distance: 8 },
    },
    {
      type: "MOVE",
      data: { direction: "left", distance: 15 },
    },
    {
      type: "MOVE",
      data: { direction: "left", distance: 11 },
    },
    {
      type: "MOVE",
      data: { direction: "top", distance: 12 },
    },
    {
      type: "MOVE",
      data: { direction: "left", distance: 11 },
    },
    {
      type: "CHAT",
      data: { text: "Nice1!", distance: 8 },
    },
    {
      type: "CHAT",
      data: { text: "Nice2!", distance: 15 },
    },
    {
      type: "CHAT",
      data: { text: "Nice3!", distance: 11 },
    },
    {
      type: "CHAT",
      data: { text: "Nice4!", distance: 12 },
    },
    {
      type: "CHAT",
      data: { text: "Nice5!", distance: 11 },
    },
  ];

  console.log("队列长度", queueList.length);

  queueList.forEach((item) => {
    queue.addRequest(item.type, item.data, gameState);
  });

  // // 添加高优先级操作
  // queue.addRequest("BRAKE", { intensity: 0.8 }, gameState);
  // // 添加低优先级操作
  // queue.addRequest("CHAT", { text: "Nice!" }, gameState);
};
const startTimerWorker = () => {
  // 🎮 主线程调用
  countdownWorker = new Worker(
    new URL("@/utils/countdownWorker.ts", import.meta.url)
  );
  timeDom = document.getElementById("timer2");
  countdownWorker.onmessage = ({ data }) => {
    // 更新剩余时间
    remainingTime = data.remaining;
    // timeDom.textContent = formatTime(data.remaining);
  };

  // 开始3秒倒计时
  countdownWorker.postMessage({
    type: "START",
    duration: 5 * 60 * 1000,
  });
  // 启动 RAF
  updateUI();
};
const pauseTimerWorker = () => {
  // 停止倒计时
  countdownWorker.postMessage({ type: "STOP" });
};

const formatTime = (milliseconds: number) => {
  const minutes = Math.floor(milliseconds / (1000 * 60));
  const seconds = Math.floor((milliseconds % (1000 * 60)) / 1000);
  const ms = Math.floor((milliseconds % 1000) / 10); // 保留两位毫秒数

  return `${String(minutes).padStart(2, "0")}分${String(seconds).padStart(
    2,
    "0"
  )}秒${String(ms).padStart(2, "0")}毫秒`;
};

const updateUI = () => {
  if (remainingTime !== null && timeDom) {
    timeDom.textContent = formatTime(remainingTime);
  }
  if (animationFrameId !== null) {
    cancelAnimationFrame(animationFrameId);
  }
  // 持续请求下一帧
  animationFrameId = requestAnimationFrame(updateUI);
};

const continueTimerWorker = () => {
  countdownWorker.postMessage({ type: "CONTINUE" });
};
onUnmounted(() => {
  countdownWorker?.terminate();
  if (animationFrameId !== null) {
    cancelAnimationFrame(animationFrameId);
  }
});
const startTimer1 = () => {
  const timer = new CountdownTimer({
    selector: "#timer",
    targetTime: Date.now() + 5 * 60 * 1000, // 5分钟倒计时
    onComplete: () => console.log("倒计时结束!"),
  });
  // 开始倒计时
  timer.start();
};
</script>

<style scoped lang="scss">
.testinput {
  width: calc(100% - 8px);
  height: 30px;
  margin-bottom: 10px;
}
iframe {
  width: 100vw;
  height: 100vh;
}

.egg {
  width: 100px;
  height: 150px;
  background: url("./egg01.png") no-repeat;
  background-size: contain;
  background-position: center;
  border-radius: 50%;
  position: relative;
  // transform-origin: bottom center;
  transform-origin: 50% 70%;
  animation: shake 1s infinite ease;
}

// 0.1
@keyframes shake {
  0%,
  70%,
  80%,
  90%,
  100% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(-8deg);
  }
  20% {
    transform: rotate(8deg);
  }
  30% {
    transform: rotate(-7deg);
  }
  40% {
    transform: rotate(7deg);
  }
  50% {
    transform: rotate(-6deg);
  }
  60% {
    transform: rotate(6deg);
  }
}

#timer {
  font-family: "Arial", sans-serif;
  font-size: 3rem;
  color: #333;
}

#timer span {
  display: inline-block;
  min-width: 2ch;
  text-align: center;
}
</style>
